<template>
  <div class="home">
    <header class="header">
      <el-row :gutter="10">
        <el-col :lg="6" :sm="12"
          ><el-card
            shadow="hover"
            style="background: linear-gradient(to bottom, #01bdfb, #0a60e2)"
          >
            <Market :getSale="saleList.total">
              <template #icon>
                <el-button
                  style="color: #489bf9"
                  icon="el-icon-s-order"
                  circle
                />
              </template>
            </Market> </el-card
        ></el-col>
        <el-col :lg="6" :sm="12"
          ><el-card
            shadow="hover"
            style="background: linear-gradient(to bottom, #f67273, #e82849)"
          >
            <Market :getSale="saleList.today">
              <template #icon>
                <el-button
                  style="color: #e82849"
                  icon="el-icon-s-home"
                  circle
                />
              </template>
            </Market> </el-card
        ></el-col>
        <el-col :lg="6" :sm="12"
          ><el-card
            shadow="hover"
            style="background: linear-gradient(to bottom, #07e386, #02b156)"
          >
            <Market :getSale="saleList.project">
              <template #icon>
                <el-button
                  style="color: #02b156"
                  icon="el-icon-folder-opened"
                  circle
                />
              </template>
            </Market> </el-card
        ></el-col>
        <el-col :lg="6" :sm="12"
          ><el-card
            shadow="hover"
            style="background: linear-gradient(to bottom, #ffb83e, #fd8c40)"
          >
            <Market :getSale="saleList.order">
              <template #icon>
                <el-button
                  style="color: #fd8c40"
                  icon="el-icon-s-claim"
                  circle
                />
              </template>
            </Market> </el-card
        ></el-col>
      </el-row>
    </header>
    <main class="main">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-row>
            <el-card class="box-card">
              <el-col :span="13.5">
                <div id="bar" style="width: 512px; height: 380px" />
              </el-col>
              <el-col :span="8">
                <el-card shadow="never">123</el-card>
              </el-col>
            </el-card>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover"> 1234 </el-card>
        </el-col>
      </el-row>
    </main>
  </div>
</template>

<script>
import Market from "@/components/Market/Market.vue";
import { reqsale, reqformat, reqorderinfo } from "@/api/user";
import * as echarts from "echarts";
export default {
  name: "HomeView",
  data() {
    return {
      /*卡片数据*/
      saleList: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //发起并发请求
    async getData() {
      const res = await Promise.all([reqsale(), reqformat(), reqorderinfo()]);
      /*销售数据*/
      const getSale = res[0].data.data.list;
      /*月销售额*/
      if (res[0].status == 200) {
        const getMonth = res[1].data.result.data.sale_money;
        /*赋值name*/
        const saleMonthName = getMonth.map((item) => item.name);
        /*赋值数量*/
        const saleMonthNum = getMonth.map((item) => item.num);
        this.Echart(saleMonthName, saleMonthNum);
      }
      const {
        // eslint-disable-next-line no-unused-vars
        collect,
        collectTotal,
        // eslint-disable-next-line no-unused-vars
        id,
        // eslint-disable-next-line no-unused-vars
        pay,
        payTotal,
        // eslint-disable-next-line no-unused-vars
        sale,
        saleTotal,
        // eslint-disable-next-line no-unused-vars
        views,
        viewsTotal,
      } = getSale;
      this.saleList = {
        total: {
          title: "销售总量",
          value: collectTotal,
        },
        today: {
          title: "采购总额",
          value: saleTotal,
        },
        project: {
          title: "活跃项目(个)",
          value: viewsTotal,
        },
        order: {
          title: "产生订单",
          value: payTotal,
        },
      };
    },
    /*
     * echarts图表
     * */
    Echart(x, y) {
      /*
       * 绑定dom元素
       * */
      console.log(x, y);
      let myChart = echarts.init(document.getElementById("bar"));
      let option = {
        title: {
          text: "月销售额",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            //dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            //restore: { show: true },
            //saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            data: x,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 25000,
            interval: 2500,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: this.$data,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: y,
            itemStyle: {
              color: "#60dc35",
            },
          },
        ],
      };
      /*监听图表变化*/
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      /*
       * 挂载echarts到dom元素
       * */
      myChart.setOption(option);
    },
  },
  components: {
    Market,
  },
};
</script>
<style lang="less" scoped>
.home {
  padding: 0;
  margin: 0;
  height: 100vh;
  .header {
    width: 100%;
    .el-card {
      width: 340px;
    }
  }
  .main {
    .el-card-body {
    }
    margin-top: 20px;
  }
}
</style>
